<!--  -->
<template>
    <div id="PublishButton">
        <el-dropdown ref="dropdown1" trigger="click" popper-class="PublishButton-el-dropdown">
      <span class="el-dropdown-link">
        <el-button type="primary">发布</el-button>
      </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <div class="PublishButton-layout">
                        <el-container>
                            <el-header>发布文章</el-header>
                            <el-main>
                                <div>
                                    <span><i class="color-red">*</i>分类</span>
                                    <span>
                    <el-button type="info" plain
                               :class="{'contain-tag':checkTag(item)}"
                               v-for="(item,index) in tagList"
                               @click="addTag(item)">
                      {{ item }}
                    </el-button>
                  </span>
                                </div>
                                <div>
                                    <span><i class="color-red">*</i>添加标签</span>
                                    <span>
                      <el-input v-model="inputFlag" @change='change()' placeholder="请添加标签..." clearable/>
                  </span>
                                </div>
                                <div>
                                    <span>文章封面</span>
                                    <span>
<!--                    上传图片-->
                    <div>
                      <el-upload
                              class="upload-demo"
                              drag
                              :headers="headers"
                              action="/api/files/upload"
                              :limit="limit"
                              :on-success="fileUploadSuccess"
                      >
                        <el-icon class="el-icon--upload"><upload-filled/></el-icon>
                        <div class="el-upload__text">
                          拖拽文件 或 <em>点击上传</em>
                        </div>
                        <template #tip>
                          <div class="el-upload__tip">
                            jpg/png files with a size less than 500kb
                          </div>
                        </template>
                      </el-upload>
                    </div>
                  </span>
                                </div>
                                <div>
                                    <span>收录至专栏</span>
                                    <span>此功能暂未开放</span>
                                </div>
                                <div>
                                    <span>编辑摘要</span>
                                    <span>此功能暂未开放</span>
                                </div>
                            </el-main>
                            <el-footer>
                                <div>
                                    <el-button type="primary" plain>取消</el-button>
                                    <el-button type="primary" @click="publish()">确认并发布</el-button>
                                </div>
                            </el-footer>
                        </el-container>
                    </div>
                    <!--          <el-dropdown-item></el-dropdown-item>-->
                    <!--          <el-dropdown-item>个人中心</el-dropdown-item>-->
                    <!--          <el-dropdown-item>个人图书</el-dropdown-item>-->
                    <!--          <el-dropdown-item @click="$router.push('/publish')">发布文章</el-dropdown-item>-->
                    <!--          <el-dropdown-item @click="$router.push('/chat')">聊天室</el-dropdown-item>-->
                    <!--          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>-->
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import {fetchTagList, save} from "@/api/blog/tag";
import request from "@/utils/request";
import {UploadFilled} from '@element-plus/icons-vue'
import {publish} from '@/api/blog/blog'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;

export default {
    name: "PublishButton",
//import引入的组件需要注入到对象中才能使用
    components: {
        UploadFilled
    },
    props: {
        blogPublish: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
//这里存放数据
        return {
            tagList: [],
            addTagList: [],
            inputFlag: '',
            localBlogPublish: this.blogPublish,
            limit: 1
        };
    },
//监听属性 类似于data概念
    computed: {
        headers() {
            return {
                'token': sessionStorage.getItem("token")
            }
        }
    },
//监控data中的数据变化
    watch: {},
//方法集合
    methods: {

        loadEditBlog() {
            if (this.localBlogPublish.tagList == null || this.localBlogPublish.tagList == [] ||
                this.localBlogPublish.tagList == undefined) {
                return
            }
            if (this.localBlogPublish.flag == '' || this.localBlogPublish.flag == null ||
                this.localBlogPublish.flag == undefined) {
                return
            }
            this.addTagList = this.localBlogPublish.tagList
            this.inputFlag = this.localBlogPublish.flag
        },
        load() {
            fetchTagList().then((res) => {
                this.tagList = res.data
            })
        },

        addTag(tag) {
            if (this.addTagList == null || this.addTagList == undefined || this.addTagList == []) {
                this.addTagList.push(tag)
                console.log("this.addTagList ", this.addTagList)
                return
            }
            if (this.addTagList.includes(tag)) {
                this.addTagList = this.addTagList.filter((item) => item != tag)
                console.log("this.addTagList ", this.addTagList)
                return
            }
            this.addTagList.push(tag)
            console.log("this.addTagList ", this.addTagList)
        },
        publish() {
            // console.log("this.blogPublish",this.blogPublish)
            // console.log("this.localBlogPublish",this.localBlogPublish)
            // this.blogPublish.content = this.editorContent
            let user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
            this.localBlogPublish.username = user
            this.localBlogPublish.flag = this.inputFlag
            this.localBlogPublish.tagList = this.addTagList
            publish(this.blogPublish).then(res => {
                //文章发布
                if (res.code == 0) {
                    // this.$router.push("/")
                    // debugger
                    this.$emit("clear-blog")
                    this.$router.go(-1)
                }
            })
        },

        change() {
            this.$forceUpdate();  //强制刷新
        },

        fileUploadSuccess(res) {
            if (res.code == 200 || res.code == 0) {
                this.localBlogPublish.firstPicture = res.data
            }
        },

        checkTag(item) {
            if (this.addTagList == [] || this.addTagList == null) {
                return false
            }
            return this.addTagList.includes(item)
        },
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.loadEditBlog()
        console.log("localBlogPublish", this.localBlogPublish)
    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.load()
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
@import "../../style/blog/PublishButton.less";
@import "../../style/public/common.less";
</style>

